<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>部门列表</span>
            </div>
          </template>
          <el-tree
            :data="departments"
            :props="defaultProps"
            @node-click="handleDepartmentSelect"
            default-expand-all
          />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ currentDepartment ? currentDepartment.name : '全部' }}员工列表</span>
              <el-input
                v-model="searchQuery"
                placeholder="搜索员工"
                style="width: 200px"
                class="filter-item"
                @keyup.enter="handleSearch"
              >
                <template #suffix>
                  <el-icon class="el-input__icon" @click="handleSearch">
                    <search />
                  </el-icon>
                </template>
              </el-input>
            </div>
          </template>
          <el-table
            v-loading="loading"
            :data="employeeList"
            border
            fit
            highlight-current-row
          >
            <el-table-column label="姓名" prop="name" align="center" width="120" />
            <el-table-column label="工号" prop="employeeId" align="center" width="120" />
            <el-table-column label="部门" prop="department" align="center" width="150" />
            <el-table-column label="职位" prop="position" align="center" width="150" />
            <el-table-column label="手机" prop="mobile" align="center" width="150" />
            <el-table-column label="邮箱" prop="email" align="center" min-width="200" />
            <el-table-column label="操作" align="center" width="120">
              <template #default="{row}">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleViewDetail(row)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="listQuery.page"
            v-model:limit="listQuery.limit"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 员工详情对话框 -->
    <el-dialog
      title="员工详情"
      v-model="dialogVisible"
      width="600px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ currentEmployee.employeeId }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
        <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
        <el-descriptions-item label="手机">{{ currentEmployee.mobile }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ currentEmployee.email }}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{ currentEmployee.entryDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentEmployee.status }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const total = ref(0)
const dialogVisible = ref(false)
const searchQuery = ref('')
const currentDepartment = ref(null)
const currentEmployee = ref({})

const departments = ref([
  {
    id: 1,
    name: '总经办',
    children: []
  },
  {
    id: 2,
    name: '人力资源部',
    children: []
  },
  {
    id: 3,
    name: '技术部',
    children: [
      {
        id: 31,
        name: '开发组'
      },
      {
        id: 32,
        name: '测试组'
      }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'name'
}

const listQuery = ref({
  page: 1,
  limit: 20,
  departmentId: null
})

const employeeList = ref([])

const handleDepartmentSelect = (data) => {
  currentDepartment.value = data
  listQuery.value.departmentId = data.id
  getList()
}

const handleSearch = () => {
  listQuery.value.page = 1
  getList()
}

const handleViewDetail = (row) => {
  currentEmployee.value = row
  dialogVisible.value = true
}

const getList = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取员工列表
    loading.value = false
  } catch (error) {
    console.error('获取员工列表失败:', error)
    ElMessage.error('获取员工列表失败')
    loading.value = false
  }
}

// 初始化加载数据
getList()
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
</style>